<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>1112474-Home</title>
<link rel="stylesheet" type="text/css" href="../css/1112474_style.css" />
<meta charset="UTF-8"/>
<style>
    ul {
    padding: 5px;
    margin: 10px 0;
    list-style: none;
    float: left;
}
ul li {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 10px;
}
ul li a {
    text-decoration: none;
    float:left;
    color: #999;
    cursor: pointer;
    font: 900 14px/22px "Arial", Helvetica, sans-serif;
    border-radius: 5px;
    box-shadow: 3px 3px 1px #888888;
}
ul li a span {
    margin: 0 10px 0 -10px;
    padding: 1px 8px 5px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
    background:#ff6600;
    border-radius: 5px;
    box-shadow: 3px 3px 1px #888888;
}
ul.blue li a:hover {
    background: blue;
}
 
 ul.blue li a:hover span {
     background:green;
     color: white;
}
</style>
</head>
    <body>
        <ul class="blue">
            <li><a href="#" title="home" class="current"><span>home</span></a></li>
            <li><a href="#" title="products"><span>products</span></a></li>
            <li><a href="#" title="blog"><span>blog</span></a></li>
            <li><a href="#" title="contact"><span>contact</span></a></li>
        </ul>
    </body>
</html>